<html>
<head>
    <title>AI Chat</title>
    <link rel="stylesheet" href="/chat/typography.css">
    <link rel="stylesheet" href="/css/ui.css">
    <link rel="icon" type="image/svg" href="/chat/fav.svg">
    <style>
        [type='button'],button[type='submit']{cursor:pointer}
        [type='checkbox'].switch:checked:hover, 
        [type='checkbox'].switch:checked:focus,
        [type='checkbox'].switch:checked,
        [type='checkbox'].switch:focus,
        [type='checkbox'].switch
        {
            border: none; 
            background: none;
            outline: none;
            box-shadow: none;
            cursor: pointer;
        }
    </style>
</head>
<script type="importmap">
    {
        "imports": {
            "vue": "/js/vue.mjs",
            "vue-router": "/js/vue-router.mjs",
            "@servicestack/client": "/js/servicestack-client.mjs",
            "@servicestack/vue": "/js/servicestack-vue.mjs",
            "idb": "/js/idb.mjs",
            "marked": "/js/marked.mjs",
            "highlight.js": "/js/highlight.mjs",
            "chart.js": "/js/chart.js",
            "color.js": "/js/color.js"  
        }
    }
</script>
<body>
<div id="app"></div>
</body>
<script type="module">
import { createApp, defineAsyncComponent } from 'vue'
import { createWebHistory, createRouter } from "vue-router"
import ServiceStackVue from "@servicestack/vue"
import App from '/chat/App.mjs'
import ai from '/chat/ai.mjs'
import SettingsDialog from '/chat/SettingsDialog.mjs'

const { config, models } = await ai.init()
const MainComponent = defineAsyncComponent(() => import(ai.base + '/Main.mjs'))
const RecentsComponent = defineAsyncComponent(() => import(ai.base + '/Recents.mjs'))
const AnalyticsComponent = defineAsyncComponent(() => import(ai.base + '/Analytics.mjs'))

const Components = {
    SettingsDialog,
}

const routes = [
    { path: '/', component: MainComponent },
    { path: '/c/:id', component: MainComponent },
    { path: '/recents', component: RecentsComponent  },
    { path: '/analytics', component: AnalyticsComponent  },
    { path: '/:fallback(.*)*', component: MainComponent }
]
routes.forEach(r => r.path = ai.base + r.path)
const router = createRouter({
    history: createWebHistory(),
    routes,
})
const app = createApp(App, { config, models })
app.use(router)
app.use(ServiceStackVue)
app.provide('ai', ai)
app.provide('config', config)
app.provide('models', models)
Object.keys(Components).forEach(name => {
    app.component(name, Components[name])
})

window.ai = app.config.globalProperties.$ai = ai

app.mount('#app')
</script>
</html>